<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Feature Handler Acceptance Test</title>
    <style type="text/css">
    
        body {
            font-size: 0.8em;
        }
        p {
            padding-top: 1em;
        }
        li {
            list-style: none;
        }
        #output {
            width: 300px;
            height: 300px;
        }
        #west {
            width: 425px;
        }

        #east {
            position: absolute;
            left: 450px;
            top: 5px;
        }
        #map {
            width: 400px;
            height: 400px;
            border: 1px solid gray;
        }

    </style>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript"> 

        var map, draw, handler, controls;
        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

        function init(){
            map = new OpenLayers.Map('map');

            var vectors = new OpenLayers.Layer.Vector(
                "Vector Layer",
                {isBaseLayer: true}
            );
            map.addLayer(vectors);
            
            
            draw = new OpenLayers.Control.DrawFeature(
                vectors, OpenLayers.Handler.Polygon
            );
            map.addControl(draw);
            
            var callbacks = {
                "over": function(feature) {
                    log("over " + feature.id);
                },
                "out": function(feature) {
                    log("out " + feature.id);
                },
                "click": function(feature) {
                    log("click " + feature.id);
                },
                "dblclick": function(feature) {
                    log("dblclick " + feature.id);
                },
                "clickout": function(feature) {
                    log("clickout " + feature.id);
                }
            };
            
            handler = new OpenLayers.Handler.Feature(
                {map: map}, vectors, callbacks
            );
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }
        
        function log(msg) {
            document.getElementById('output').value += msg + "\n";
        }
        
        function clearLog() {
            document.getElementById('output').value = "";
        }

    </script>
  </head>
  <body onload="init()">
    <div id="west">
        <div id="map"></div>
        <p>
            Draw a few polygons on the map.  Some overlapping.  Activate the
            feature handler and ensure that "over" and "out" are called only
            when mousing over/out of a feature for the first time.  The
            "click" callback should be called for every click on a feature.
            The "clickout" callback should be called when?
        </p>
    </div>
    <div id="east">
        <ul>
            <li>
                <input type="radio" name="type" value="none" id="noneToggle"
                       onclick="draw.deactivate();handler.deactivate();" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="type" value="polygon" id="polygonToggle"
                       onclick="draw.activate();handler.deactivate();" />
                <label for="polygonToggle">draw polygon</label>
            </li>
            <li>
                <input type="radio" name="type" value="feature" id="featureToggle"
                       onclick="draw.deactivate();handler.activate();" />
                <label for="featureToggle">activate feature handler</label>
            </li>
        </ul>
        <button onclick="clearLog();">clear log</button><br />
        <textarea id="output"></textarea>
    </div>
  </body>
</html>
